<!-- start: BlackCat PageHeader -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap">
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/shift-away.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hezulong1/cnblogs@pro/icon/iconfont.css">

<script>
/* eslint-disable @typescript-eslint/no-unused-vars */

$('body').addClass('loading')

const renderLogo = () => {
  $('link[rel*="icon"]').remove()
  var $favicon = $('<link rel="icon" href="https://blog-static.cnblogs.com/files/blackcat/Background.ico">')
  $('title').after($favicon)
}
renderLogo()

const BC_STORE_KEY = 'blackcat-settings'
const BC_STORE_WHITELIST = ['ZEN_MODE', 'SIDEBAR']

const bcIcons = new Map([
  ['fullscreen', '<span role="img" aria-label="icon: fullscreen"><svg xmlns="http://www.w3.org/2000/svg" class="svg-icons" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"></path></svg></span>'],
  ['fullscreen-exit', '<span role="img" aria-label="icon: fullscreen-exit"><svg xmlns="http://www.w3.org/2000/svg" class="svg-icons" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3v3a2 2 0 01-2 2H3m18 0h-3a2 2 0 01-2-2V3m0 18v-3a2 2 0 012-2h3M3 16h3a2 2 0 012 2v3"></path></svg></span>'],
  ['help', '<span role="img" aria-label="icon: help"><svg xmlns="http://www.w3.org/2000/svg" class="svg-icons" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span>'],
  ['left-layout', '<span role="img" aria-label="icon: left-layout"><svg xmlns="http://www.w3.org/2000/svg" class="svg-icons" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg></span>'],
  ['palette', '<span role="img" aria-label="icon: palette"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg-icons" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="currentColor" d="M200.8 53.9A103.4 103.4 0 0 0 128 24h-1.1a104 104 0 0 0-33.5 202.1a32 32 0 0 0 42.6-30.2V192a16 16 0 0 1 16-16h46.2a31.7 31.7 0 0 0 31.2-24.9a101.5 101.5 0 0 0 2.6-24a102.9 102.9 0 0 0-31.2-73.2Zm13 93.7a15.9 15.9 0 0 1-15.6 12.4H152a32.1 32.1 0 0 0-32 32v3.9A16 16 0 0 1 98.7 211A88.2 88.2 0 0 1 40 128a88.1 88.1 0 0 1 87.1-88h.9a88.3 88.3 0 0 1 88 87.2a86.8 86.8 0 0 1-2.2 20.4ZM140 76a12 12 0 1 1-12-12a12 12 0 0 1 12 12Zm-46.6 32A12 12 0 1 1 89 91.6a12.1 12.1 0 0 1 4.4 16.4Zm0 40a12 12 0 1 1-16.4-4.4a12.1 12.1 0 0 1 16.4 4.4Zm90-52a12 12 0 1 1-16.4-4.4a12 12 0 0 1 16.4 4.4Z"></path></svg></span>'],
])

const bcStore = (function (storage) {
  const store = storage.getItem(BC_STORE_KEY)
  const cache = store ? JSON.parse(store) : {}
  const handler = {
    set(target, property, value, receiver) {
      if (BC_STORE_WHITELIST.includes(property)) {
        const store = storage.getItem(BC_STORE_KEY)
        const cache = store ? JSON.parse(store) : {}
        cache[property] = value
        storage.setItem(BC_STORE_KEY, JSON.stringify(cache))
      }
      Reflect.set(target, property, value, receiver)
    },
    get(target, property, receiver) {
      if (BC_STORE_WHITELIST.includes(property)) {
        const store = storage.getItem(BC_STORE_KEY)
        const cache = store ? JSON.parse(store) : {}
        return storage.getItem(cache[property])
      }
      return Reflect.get(target, property, receiver)
    },
  }
  return new Proxy(cache, handler)
})(localStorage)

const DOM = new Proxy({}, {
  get(target, property) {
    return function (attrs = {}, ...children) {
      const tagName = property.toLowerCase()
      const el = document.createElement(tagName)

      if (tagName === 'button') {
        attrs.role = 'button'
        attrs.ariaLabel = 'Button'
        attrs.tabindex = '0'
      }

      for (const prop of Object.keys(attrs)) {
        el.setAttribute(prop, attrs[prop])
      }
      for (let child of children) {
        if (typeof child === 'string') {
          child = document.createTextNode(child)
        }
        el.appendChild(child)
      }
      return el
    }
  },
})

const digit = (number, length = 2) => ('' + number).padStart(length, '0')
function toDateString(time = new Date(), format = 'yyyy-MM-dd HH:mm:ss') {
  time = typeof time === 'string' ? time.replace(/-/g, '/') : time
  const date = new Date(time)
  const ymd = [
    digit(date.getFullYear(), 4),
    digit(date.getMonth() + 1),
    digit(date.getDate())
  ]
  const hms = [
    digit(date.getHours()),
    digit(date.getMinutes()),
    digit(date.getSeconds())
  ]
  return format.replace(/yyyy/g, ymd[0]).replace(/MM/g, ymd[1]).replace(/dd/g, ymd[2]).replace(/HH/g, hms[0]).replace(/mm/g, hms[1]).replace(/ss/g, hms[2])
}

;(() => {
  const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
  const setting = localStorage.getItem('cnblogs-color-scheme') || 'auto'
  if (setting === 'dark' || (prefersDark && setting !== 'light')) { document.documentElement.classList.toggle('dark', true) }
  // document.documentElement.dataset.accent = 'green'
  // document.documentElement.dataset.fontSize = 'medium'
})()
</script>

<!-- end: BlackCat PageHeader -->
